<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
			}

			#allmap {
				width: 100%;
				height: 100%;
				overflow: hidden;
				z-index: 1;
			}

			.map_img_box {
				width: 90%;
				height: 90px;

				margin-left: 5%;
				border-radius: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				z-index: 999;
			}

			.map_img_icon {
				margin-right: 5%;
				text-align: center;
			}

			.map_tetxt {
				font-size: 11px;
				color: #00A0E9;
			}
		</style>
	</head>

	<body>
		<div id='allmap'></div>
		<div class="test" id="test" style="z-index: 99999;">
			<div class="top_box" id="movbox">
				<div></div>
			</div>

			<div style="height: 700px;overflow-y: scroll;">
				<div class="big_box">
					<div style="display: flex;justify-content: space-between;align-items: center;">
						<div class="big_box_flx">
							<img src="../carType/gou.png" alt="" id="image" width="50" height="50"
								style="border-radius: 100%;">
							<div class="big_box_text">
								<div class="big_box_title" id="cartype">渝A62335 小面</div>
								<div id="name">刘师傅 </div>
							</div>
						</div>
						<div class="big_shou">
							<img src="../png/meishou.png" alt="" width="20" height="20">
						</div>
					</div>
					<div class="top_box_line"></div>

					<div class="map_img_box">
						<div class="map_img_icon" style="margin-left: 6%;z-index: 999;" id="phone">
							<img src="../order/54.png" alt="" width="17" height="17">
							<div class="map_tetxt" style="color: #666666;">发消息</div>
						</div>
						<div class="map_img_icon">
							<img src="../order/32.png" alt="" width="20" height="17" id="msg">
							<div class="map_tetxt" style="color: #666666;">打电话</div>
						</div>
						<div class="map_img_icon">
							<img src="../order/12.png" alt="" width="15" height="19" id="dete">
							<div class="map_tetxt" style="color: #666666;">联系客服</div>
						</div>
						<div class="map_img_icon" id="share">
							<img src="../order/57.png" alt="" width="18.5" height="19">
							<div class="map_tetxt" style="color: #666666;">取消订单</div>
						</div>
					</div>
				</div>
				<div class="zhong_box">
					<div class="zhong_title">
						<div class="zhong_box_moeny"><span style="font-size: 18px;">￥</span><span
								id="money">153.55</span>
						</div>
						<div class="hejie">合计费用</div>
					</div>
					<div class="yunsgu">
						<div class="yunsguOne">线路信息</div>
						<div class="yunstwo">运输节点</div>
					</div>
					<div class="line_box">
						<div class="line_flx">
							<div class="line_quanx">发</div>
							<div class="line_title" id="faddress">重庆长安明生物流公司</div>
						</div>
					</div>
					<div class="line_zhongjian" id="zoomout">
						<div id="lujin">途径2个地点</div>
						<div>></div>
					</div>
					<div id="xiebox">

					</div>
					<div>
						<div class="line_box">
							<div class="line_flx">
								<div class="line_quanx" style="background-color: #579AA3;">卸</div>
								<div class="line_title" id="xieddress">金源大道砚北B区</div>
							</div>
						</div>
					</div>
				</div>
				<div class="zuihou">
					<div class="xinxi">
						<div class="biahoa">订单编号</div>
						<div class="numbers" id="binhao">DD1234567890</div>
					</div>
					<div class="xinxi">
						<div class="biahoa">订单车型</div>
						<div class="numbers" id="car">小型面包</div>
					</div>
					<div class="xinxi">
						<div class="biahoa">搬运服务</div>
						<div class="numbers" id="fuwu">不需要搬运服务</div>
					</div>
					<div class="xinxi">
						<div class="biahoa">回单服务</div>
						<div class="numbers" id="huidan">回单拍照</div>
					</div>
					<div class="xinxi">
						<div class="biahoa">跟单人</div>
						<div class="numbers" id="ren">无</div>
					</div>
					<div class="xinxi">
						<div class="biahoa">订单备注</div>
						<div class="numbers" id="beizhu">大型玻璃柜，易碎</div>
					</div>
				</div>
				<div style="height:100px;"></div>
			</div>





		</div>
	</body>


	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
	</script>
	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=VeNlX17jPLxeiO4BzoL5rb1nyULo4LA9"></script>
	<script type="text/javascript">
		var list
		var show
		document.addEventListener('UniAppJSBridgeReady', function() {
			var mood = plus.storage.getItem('orderMood');
			mood = JSON.parse(mood)
			list = mood.address
			
			console.log(plus.storage.getItem('orderMood'))
			var one = list.shift()
			var three = list.pop()
			page()
			var show = false
			var mood = plus.storage.getItem('mood');
			mood = JSON.parse(mood)
			var map = new BMapGL.Map("allmap");
			map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
			var output = "剩余需要";
			var searchComplete = function (results){
			    if (transit.getStatus() != BMAP_STATUS_SUCCESS){
			        return ;
			    }
			    var plan = results.getPlan(0);
				 output += plan.getDistance(true);
			    output += plan.getDuration(true);                //获取时间
			}
			var transit = new BMapGL.DrivingRoute(map, {renderOptions: {map: map},
			    onSearchComplete: searchComplete,
			    onPolylinesSet: function(){        
			        // setTimeout(function(){alert(output)},"1000");
			}});
			var start=new BMapGL.Point(one.lng,one.lat);
			var end=new BMapGL.Point(three.lng,three.lat);
			transit.search(start, end);	












			var phone = document.getElementById("phone");
			phone.addEventListener('click', function() {
				uni.postMessage({
					data: {
						cont: 0
					}
				});
			}, false)

			var msg = document.getElementById("msg");
			msg.addEventListener('click', function() {
				uni.postMessage({
					data: {
						cont: 1
					}
				});
			}, false)

			var dete = document.getElementById("dete");
			dete.addEventListener('click', function() {
				uni.postMessage({
					data: {
						cont: 2
					}
				});
			}, false)
			var share = document.getElementById("share");
			share.addEventListener('click', function() {
				uni.postMessage({
					data: {
						cont: 3
					}
				});
			}, false)
			// var daohang = document.getElementById("daohang");
			// daohang.addEventListener('click', function() {
			// 	uni.postMessage({
			// 		data: {
			// 			cont: 4
			// 		}
			// 	});
			// }, false)

			// let mood = []
			//展示数据
			function page() {
				// console.log(JSON.stringify(mood))
				var dir = document.getElementById('money')
				dir.innerText = mood.totalAmount

				var faddress = document.getElementById('faddress')
				faddress.innerText = one.address

				var xieddress = document.getElementById('xieddress')
				xieddress.innerText = three.address

				var car = document.getElementById('car')
				car.innerText = mood.vehicleTypeSimpleName

				var fuwu = document.getElementById('fuwu')
				if (mood.moveHouse) {
					fuwu.innerText = '需要搬运服务'
				} else {
					fuwu.innerText = '不需要搬运服务'
				}

				var huidan = document.getElementById('huidan')
				huidan.innerText = mood.receiptType


				var ren = document.getElementById('ren')
				if (mood.followPerson) {
					ren.innerText = mood.followPerson + '人'
				} else {
					ren.innerText = '无'
				}


				var beizhu = document.getElementById('beizhu')
				beizhu.innerText = mood.description

				
				var image = document.getElementById('image')
				image.src = mood.driverHeadUrl

				var name = document.getElementById('name')
				name.innerText = mood.driverNickname

				var binhao = document.getElementById('binhao')
				binhao.innerText = mood.orderNo

				var cartype = document.getElementById('cartype')
				cartype.innerText = mood.numberplate + ' ' + mood.vehicleTypeSimpleName

				var lujin = document.getElementById('lujin')
				if (list.length > 2) {
					lujin.innerText = '途径0个地点'
				} else {
					lujin.innerText = `途径${list.length*1+1}个地点`
				}

			}






		});
		var zoomout = document.getElementById("zoomout");
		zoomout.addEventListener('click', function() {

			tujin()
		}, false)
		//展示隐藏数据
		function tujin() {
			show = !show
			var html = ''
			console.log(list)
			if (show) {
				for (let i = 0; i < list.length; i++) {
					console.log(list[i].addressType)
					html += `<div>
				<div class="line_box" >
					<div class="line_flx">
						<div class="line_quanx" style="background-color: #1D9C3C;">${list[i].addressType=='1' ? '卸':'发'}</div>
						<div class="line_title" >金源大道砚北${list[i].address}区</div>
					</div>
				</div>
			</div>`
				}
				document.getElementById('xiebox').innerHTML = html
			} else {
				html = `<div></div>`
				document.getElementById('xiebox').innerHTML = html
			}
		}
	</script>

	<script>
		let movbox = document.getElementById('movbox')
		let test = document.getElementById('test')
		let touchsize = 0 //手指位置
		let touchmode = '' //滑动模式
		let testsize = 0 //元素位置

		movbox.addEventListener('touchstart', function(e) {
			test.classList.remove('trans')
			test.classList.add('active')
			touchsize = e.targetTouches[0].pageY
			testsize = test.offsetTop
			//阻止事件的默认行为导致按钮不会出现活跃状态(active)
			//		e.preventDefault();
		});
		movbox.addEventListener('touchmove', function(e) {
			if (touchsize > e.targetTouches[0].pageY) { //上滑
				touchmode = 'up'
				if (test.offsetTop > document.documentElement.clientHeight * 0.23) {
					test.style.top = testsize - (touchsize - e.targetTouches[0].pageY) + 'px'
				}
			} else { //下滑
				touchmode = 'down'
				if (test.offsetTop < document.documentElement.clientHeight * 0.58) {
					test.style.top = testsize + (e.targetTouches[0].pageY - touchsize) + 'px'
				}
			}
			//阻止事件的默认行为导致按钮不会出现活跃状态(active)
			//e.preventDefault();
		});
		movbox.addEventListener('touchend', function(e) {
			test.classList.remove('active')
			if (touchmode == 'up') {
				test.style.top = document.documentElement.clientHeight * 0.2 + 'px'
			}
			if (touchmode == 'down') {
				test.style.top = document.documentElement.clientHeight * 0.6 + 'px'
			}
			test.classList.add('trans')
			//e.preventDefault();
		});
	</script>
	<style>
		.xinxi {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 80%;
			margin-left: 10%;
			margin-top: 15px;
		}

		.numbers {
			color: #262626;
			font-size: 14px;
		}

		.biahoa {
			color: #999999;
			font-size: 14px;
		}

		.line_zhongjian {
			width: 253px;
			height: 25px;
			background-color: #F4F6F9;
			border: 0.5px solid #5998A6;
			color: #5998A6;
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 4px;
			padding: 0 11px;
			margin-left: 10%;
			margin-top: 30px;
			margin-bottom: 20px;
		}

		.line_flx {
			display: flex;

		}

		.line_title {
			font-size: 15px;
			color: #202020;
			width: 220px;
		}

		.line_quanx {
			width: 21px;
			height: 21px;
			text-align: center;
			line-height: 21px;
			color: #fff;
			font-size: 12px;
			background-color: #019FE8;
			border-radius: 100%;
			margin-right: 18px;
		}

		.yunsgu {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 80%;
			margin: 0 auto;
			margin-top: 15px;
		}

		.line_box {
			width: 80%;
			margin: 0 auto;
			margin-top: 15px;
		}

		.yunsguOne {
			font-size: 15px;
			color: #262626;
		}

		.yunstwo {
			color: #019FE8;
			font-size: 15px;
		}

		.zhong_title {
			width: 100%;
			text-align: center;
			padding-top: 27px;
		}

		.hejie {
			color: #999999;
			font-size: 12px;
		}

		.zhong_box_moeny {
			font-size: 33px;
			font-weight: 600;
			color: #262626;
		}

		.zhong_box {
			width: 90%;
			background-color: #fff;
			border-radius: 10px;
			margin-top: 7px;
			margin-left: 5%;
			padding-bottom: 20px;
		}

		.zuihou {
			width: 90%;
			background-color: #fff;
			height: 220px;
			border-radius: 10px;
			margin-top: 7px;
			margin-left: 5%;
			padding-top: 8px;
		}

		.big_box {
			width: 90%;
			height: 181px;
			background-color: #fff;
			border-radius: 10px;
			margin-top: 15px;
			margin-left: 5%;
		}

		.test {
			background-color: #F2F5F8;
			left: 0;
			position: fixed;
			width: 100vw;
			height: 700px;
			top: 59%;
		}

		.trans {
			transition: top 0.1s;
		}

		.test::-webkit-scrollbar {
			display: none;
			/* Chrome Safari */

		}

		.active {
			background-color: #F2F5F8;
		}

		.up {
			top: 28.8vh;
		}

		.down {
			top: 70vh;
		}

		.top_box {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 15px;
			height: 20px;


		}

		.top_box div {
			width: 76.5px;
			height: 5px;
			background-color: #C5C5C5;
			border-radius: 5px;
		}

		.big_box_flx {
			display: flex;
			align-items: center;
			margin-left: 23px;
			padding-top: 19px;

		}

		.big_box_text {
			font-size: 12px;
			color: #676767;
			margin-left: 10px;
		}

		.big_box_title {
			font-size: 15px;
			font-weight: 600;
		}

		.big_shou {
			width: 32px;
			height: 32px;
			border-radius: 100%;
			border: 0.5px #AEAEAE solid;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 15px;
			margin-right: 30px;
		}

		.top_box_line {
			width: 295px;
			height: 1px;
			background-color: #EEEEEE;
			margin: 0 auto;
			margin-top: 16px;
		}
	</style>

</html>